<script lang="ts" setup>
import {RouterView, useRoute, useRouter} from 'vue-router'
import { ref} from 'vue';


import AppSide from "@/components/AppSide.vue";
import AppActBtn from "@/components/AppActBtn.vue";

let transitionName = ref();
let router = useRouter();
router.beforeEach((to, from) => {
  // 根据路由标记判断触发哪个动画
  if (to.meta.index > from.meta.index) {
    // 从右往左动画
    transitionName.value = 'slide-right';
  } else if (to.meta.index < from.meta.index) {
    // 从左往右动画
    transitionName.value = 'slide-left';
  } else {
    transitionName.value = '';
  }
});

</script>

<template>
  <a-layout class="layout">
    <app-act-btn />
    <a-layout-sider class="sider-style">
      <app-side/>
    </a-layout-sider>
    <a-layout>
      <a-layout-header onmousedown="aardio.hitCaption()"  class="header-style" @click="aardio.close()">Header</a-layout-header>
      <a-layout-content class="content-style">
        <router-view v-slot="{ Component }" class="child-view">
          <transition :name="transitionName" appear>
            <keep-alive>
              <component :is="Component"/>
            </keep-alive>
          </transition>
        </router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<style scoped>
.content-style {
  color: #fff;
  background-color: #f5f7fa;
  height: calc(100% - 60px);
  overflow: hidden;
}

.sider-style {
  color: #fff;
  background-color: #3ba0e9;
}

.header-style {
  height: 32px;
  line-height: 32px;
  padding-inline: 20px 80px;
  background-color: #f2f2f2;
  border-bottom: 1px solid #dfdfdf;
}

.layout {
  height: 100%;
  position: relative;
}

.content-style {
  position: relative;
}

/* 动画效果 */
.child-view {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  transition: all 0.8s cubic-bezier(0.55, 0, 0.1, 1);
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.3s;
}

.slide-right-enter-from {
  transform: translateY(-100%);
}

.slide-right-enter-to {
  transform: translateX(0);
}

.slide-right-leave-from {
  transform: translateX(0);
}

.slide-right-leave-to {
  transform: translateX(-100%);
}

.slide-left-enter-from {
  transform: translateX(-100%);
}

.slide-left-enter-to {
  transform: translateX(0);
}

.slide-left-leave-from {
  transform: translateX(0);
}

.slide-left-leave-to {
  transform: translateX(100%);
}
</style>
